@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&display=swap');

html, body {
    width: 100%;
    height: 100%;
    background-color: #222;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
body {
    box-shadow: 0px 0px 100px 20px #000 inset;
}
body.unitFocused {
    box-shadow: 0px 0px 85px 17px #000 inset;
}

* {
    user-select: none;
}

.hidden {
    display: none !important;
}

#popup-hover {
    text-align: justify;
    max-width: 20em;
    font-family: "Playfair Display";
    background-color: #222;
    padding: 0 0.5em;
    border: 3px solid;
    border-radius: 3px;
    display: inline-block;
    position: absolute;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0px 0px 15px 10px #111 inset, 0 2px 10px 5px #000;
}
#hover-cost-img {
    color: white;
    text-align: center;
    width: 24px;
    height: 24px;
    background-image: url(images/packet.png);
    background-size: 100% auto;
    margin-left: 0.8em;
    margin-top: 0.4em;
    border-radius: 100%;
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8) inset;
    float: right;
}
#popup-hover.selected {
    border-color: rgb(255, 215, 84);
}
#popup-hover:not(.selected) {
    border-color: #444;
}
#hover-name {
    color: #fff;
    font-size: 1em;
    font-weight: 900;
    margin: 0.5em 0 0;
    white-space: nowrap;
    float: left;
}
#hover-points {
    color: #d5d5d5;
    font-size: 0.95em;
}
#hover-special {
    color: #bbb;
    font-size: 0.9em;
}
#hover-description {
    color: #888;
    font-size: 0.85em;
}
#hover-unlock-type {
    font-weight: 600;
    font-size: 0.75em;
    font-style: italic;
    color: #888;
    margin: 0;
}

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

#popup-schema {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 10em;
    left: 0;
}
.popup-unit.unlocked {
    padding: 0.5em;
    border: 3px solid #000;
    border-radius: 100%;
    margin: 8px 0 0;
    background-image: radial-gradient(#444 40%, #000);
    box-shadow: 0 0 6px 10px #000;
}
.popup-unit.unlocked:hover {
    background-image: radial-gradient(#555 40%, #111);
}
.popup-unit:not(.unlocked) {
    padding: 0.5em;
    border: 3px solid #000;
    border-radius: 100%;
    background-image: radial-gradient(#222 40%, #000);
}
.popup-unit {
    width: 48px;
    height: 48px;
}
.popup-container {
    padding: 7px;
    border-radius: 100%;
    border: 3px solid #000;
    position: absolute;
    z-index: 1;
    display: inline-block;
}
.popup-container.unlocked {
    background-image: url(images/wood-background-normal.jpeg);
}
.popup-container.unlocked:hover {
    background-image: url(images/wood-background-light.jpeg);
}
.popup-container:not(.unlocked) {
    background-image: url(images/wood-background-dark.jpeg);
    cursor: pointer;
}

.popup-unit img {
    width: 48px;
    height: 48px;
    border-radius: 100%;
}
.popup-unit:not(.unlocked) img {
    opacity: 0.4;
}
.popup-container.unlocked:hover img {
    opacity: 0.7;
    transition: 0.3s all;
}
.schema-line {
    height: 8px;
    z-index: 0;
    position: absolute;
    transform-origin: 0% 0%;
    box-shadow: 0 0 4px 2px #222 inset;
}
.schema-line.unlocked {
    background-color: #aaa;
}
.schema-line:not(.unlocked) {
    background-color: #444;
}

/* #microsoft-antivirus {
    left: 50%;
    top: 2em;
    transform: translateX(-50%);
}
#browser-error {
    left: 35%;
    top: 7em;
    transform: translateX(-50%);
}
#rain {
    left: 52.5%;
    top: 14em;
    transform: translateX(-50%);
}
#chunky {
    right: 32%;
    top: 5em;
    transform: translateX(50%);
}
#free-iPhone {
    left: 20%;
    top: 10em;
    transform: translateX(-50%);
}
#adblock-blocker {
    left: 27.5%;
    top: 22.5em;
    transform: translateX(-50%);
}
#annual-survey {
    left: 42.5%;
    top: 27.5em;
    transform: translateX(-50%);
}
#lurem-impsir {
    left: 57.5%;
    top: 30em;
    transform: translateX(-50%);
}
#chunky-virus {
    left: 77.5%;
    top: 15em;
    transform: translateX(-50%);
} */